<template>
  <el-container class="full-screen">
    <!-- 侧边框功能 -->
    <el-aside :width="sidebarCollapsed ? '50px' : '200px'">
      <el-menu
        router
        :default-active="activeMenu"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :collapse="sidebarCollapsed"
        :collapse-transition="false"
        :unique-opened="false"
      >
        <div
          class="Title"
          style="font-size: 25px; color: aliceblue; margin-top: 10px"
        >
          聘途
        </div>
        <company-sidebar-menu
          :routes="companyRoutes"
          :is-hidden="isHidden"
          :parent-path="'/company'"
        ></company-sidebar-menu>
      </el-menu>
    </el-aside>

    <el-container style="background-color: white">
      <!-- 头部功能 -->
      <el-header
        style="
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          padding: 0 20px;
          gap: 50px;
        "
      >
        <!-- 侧边栏折叠按钮 -->
        <div class="header-left">
          <transition name="fade">
            <i
              :class="sidebarCollapsed ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
              @click="toggleSidebar"
              class="el-icon--medium cursor-pointer"
            ></i>
          </transition>
        </div>

        <!-- 面包屑导航 -->

        <div>
          <el-breadcrumb separator-class="el-icon-arrow-right" style="">
            <el-breadcrumb-item>聘途</el-breadcrumb-item>
            <el-breadcrumb-item
              v-for="(item, index) in dynamicBreadcrumbs"
              :key="index"
              >{{ item.meta.title }}</el-breadcrumb-item
            >
          </el-breadcrumb>
        </div>

        <!-- 用户信息和操作区 -->
        <div class="header-right flex items-center">
          <!-- 用户菜单 -->
          <el-dropdown trigger="click" @command="handleDropdownCommand">
            <div class="user-menu flex items-center cursor-pointer">
              <img
                :src="
                  userInfo?.avatar + '?t=' + Date.now() ||
                  'https://picsum.photos/32/32'
                "
                alt="用户头像"
                class="user-avatar"
              />
              <span class="user-name font-medium" style="margin-right: 10px">{{
                userInfo?.name || "我的账户"
              }}</span>
              <i class="el-icon-arrow-down el-icon--right ml-1"></i>
            </div>
            <el-dropdown-menu slot="dropdown" class="user-dropdown">
              <el-dropdown-item command="profile">
                <i class="el-icon-user-solid mr-2"></i>个人中心
              </el-dropdown-item>
              <el-dropdown-item command="account">
                <i class="el-icon-setting mr-2"></i>账号与安全中心
              </el-dropdown-item>
              <el-dropdown-item command="handleLogout" class="text-danger">
                <i class="el-icon-switch-button mr-2"></i>退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>

      <transition name="fade">
        <router-view :key="$route.path"></router-view>
      </transition>
    </el-container>
  </el-container>
</template>

<script>
import { logOutByRecruiter } from "@/api/login";
import { Message } from "element-ui";
import { mapGetters } from "vuex";
import CompanySidebarMenu from "./CompanySidebarMenu.vue";

export default {
  components: {
    CompanySidebarMenu,
  },
  data() {
    return {
      sidebarCollapsed: false,
    };
  },

  computed: {
    // 活动菜单项
    activeMenu() {
      return this.$route.name || this.$route.path;
    },

    // 获取公司相关路由
    companyRoutes() {
      const companyRoute = this.$router.options.routes.find(
        (route) => route.path === "/company"
      );

      if (!companyRoute || !companyRoute.children) {
        return [];
      }

      return companyRoute.children.filter((route) => {
        if (route.meta?.hidden) return false;
        if (route.children) {
          route.children = route.children.filter(
            (child) => !child.meta?.hidden
          );
        }
        return true;
      });
    },

    // 过滤面包屑路由
    dynamicBreadcrumbs() {
      const breadcrumbs = [];

      this.$route.matched.forEach((route, index) => {
        const routeInfo = {
          index,
          path: route.path,
          name: route.name,
          meta: route.meta,
        };

        if (route.meta && route.meta.title && !route.meta.hidden) {
          // 确保根路由显示
          if (index === 0 && route.path === "/company") {
            breadcrumbs.push({
              name: route.name,
              path: route.path,
              meta: { title: "公司中心" },
            });
          } else {
            breadcrumbs.push({
              name: route.name,
              path: route.path,
              meta: route.meta,
            });
          }
        }
      });

      return breadcrumbs;
    },

    ...mapGetters("recruiter", {
      userInfo: "userInfo",
    }),
  },

  methods: {
    isHidden(route) {
      return !route || route.meta?.hidden;
    },

    handleOpen(key, keyPath) {},

    handleClose(key, keyPath) {},

    toggleSidebar() {
      this.sidebarCollapsed = !this.sidebarCollapsed;
    },

    goToProfile() {
      this.$router.push({ name: "recruiter-center" });
    },
    goToAccount() {
      this.$router.push({ name: "account" });
    },

    async handleLogout() {
      try {
        await logOutByRecruiter();
        this.$store.dispatch("recruiter/logout");
        this.$router.replace("/login");
        Message.success("退出登录成功");
      } catch (error) {
        console.error("退出登录错误:", error);
        Message.error("退出登录失败，请重试");
      }
    },

    handleDropdownCommand(command) {
      switch (command) {
        case "profile":
          this.goToProfile();
          break;
        case "handleLogout":
          this.handleLogout();
          break;
        case "account":
          this.goToAccount();
          break;
        default:
          console.log("未知命令", command);
      }
    },
  },
};
</script>

<style scoped>
/* 让侧边框占满整个屏幕 */
.full-screen {
  min-height: 100vh;
  height: 100%;
  width: 100%;
}

/* 侧边栏样式优化 */
.sidebar {
  transition: width 0.3s ease-in-out;
  border-right: 1px solid #ebeef5;
  background-color: #545c64;
}

.el-menu-vertical-demo {
  border-right: none;
  height: 100%;
}

.menu-title {
  height: 55px;
  color: #fff;
  text-align: center;
  line-height: 55px;
  font-size: 20px;
  font-weight: bold;
  background-color: #4a5568;
  margin-bottom: 10px;
}

/* 头部样式优化 */
.header-left {
  flex-shrink: 0;
}

.breadcrumb-container {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-right {
  margin-left: auto;
  flex-shrink: 0;
}

.user-menu {
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 10px;
}

.user-name {
  margin-right: 5px;
  color: #303133;
  font-size: 14px;
}

.el-menu-vertical-demo {
  border-right: none;
  height: 100%;
}
.el-menu--collapsed .el-menu-item {
  justify-content: center;
}
.el-menu--collapsed .el-menu-item__label {
  display: block !important;
  white-space: nowrap;
  padding: 0 5px;
  font-size: 12px;
}
.breadcrumb-container {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
  margin-left: 10px;
}

/* 动画效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: all 0.3s;
}
.fade-transform-enter {
  opacity: 0;
  transform: translateX(10px);
}
.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(-10px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sidebar {
    width: 50px !important;
  }

  .header {
    padding: 0 15px;
  }

  .breadcrumb-container {
    margin-left: 10px;
  }
}
</style>